<template>
    <z-paging @pageScroll="pageScroll">
        <view class="header_box">
            <view class="biaoti_box">
                <view class="left_icon_box" @click="back">
                    <image src="https://www.dingxians.cn/upload/20250324/67e13c80ecef6.png" mode="scaleToFill" />
                </view>
                <view class="center_biaoti_box">
                    幸运屋
                </view>
                <view class="left_icon_box">
                    <!-- 占位 -->
                </view>
            </view>
        </view>
            <!-- 轮播 -->
            <view class="swiper_box">
                <tn-swiper :list="swiperList" effect3dPreviousSpacing="230" height="538" radius="0"></tn-swiper>
            </view>
            <!-- 价格介绍 -->
            <view class="jia_js_bopx" style="background-image: url('https://www.dingxians.cn/upload/20250402/67ed233c2a0b8.png');">
                <view class="top_box">{{ DetailObj.price }}</view>
                <view class="bot_box">{{ DetailObj.name }}</view>
            </view>
            <!-- 规则 -->
            <view class="rule_box">
                <view class="t">活动规则</view>
                <view class="b">{{ DetailObj.content }}</view>
            </view>
            <!-- 奖励 -->
			
            <view class="jianglu" style="background-image: url('https://www.dingxians.cn/upload/20250402/67ed233c2a0b8.png');">
                <view class="t">活动奖励</view>
                <view class="neirong_bopx" v-for="(item, index) in DetailObj.prize_arr" :key="index">
                    <view class="left_box">
                        <image :src="item.image" mode="scaleToFill" />
                    </view>
                    <view class="center_box">
                        <view class="name_s_box">{{ item.title }}</view>
                        <view class="name_jdj_box">{{ item.draw_level }}等奖{{ item.original_num }}份</view>
                    </view>
                    <view class="right_box">
                        <view class="jiazhi_box">价值</view>
                        <view class="jzk_box"
                            style="background-image: url('https://www.dingxians.cn/upload/20250402/67ed233c2a0b8.png');">
                            {{ item.price }}<text style="font-size: 21rpx;">￥</text></view>
                    </view>
                </view>
            </view>
            <!-- 参与人员 -->
            <view class="renshunums_box" style="background-image: url('https://www.dingxians.cn/upload/20250402/67ed233c2a0b8.png');">
                <view class="one_box">
                    <view class="l_t_bvox">参与人员 {{ DetailObj.cy_total }}</view>
                    <view class="r_t_bvox">
                        <!-- <view class="text_box" @click="$router('/userspage/lucky/cypep?id=' + DetailObj.id)">查看全部</view> -->
                        <!-- <view class="icon_box">
                            <u-icon name="arrow-right" color="#fff" size="20"></u-icon>
                        </view> -->
                    </view>
                </view>
                <view class="canyuytouxian_bipx">
                    <view class="dage_box" v-for="(item, index) in DetailObj.cy_data" :key="index">
                        <view class="top_box">
                            <view class="shuzi_box" v-if="Number(item.counts) > 1">{{ item.counts }}</view>
                            <image :src="item.avarat" mode="scaleToFill" />
                        </view>
                        <view class="nam_box">{{ item.nickname }}</view>
                    </view>
                </view>
            </view>
            <!-- 中奖人员 -->
            <view class="renshunums_box" style="background-image: url('https://www.dingxians.cn/upload/20250402/67ed233c2a0b8.png');"
                v-if="DetailObj.zj_data.length > 0">
                <view class="one_box">
                    <view class="l_t_bvox">中奖人员</view>
                    <view class="r_t_bvox">
                        <view class="text_box" @click="header('/pages/xyw/logDraw?id=' + DetailObj.id)">查看全部</view>
                        <!-- <view class="icon_box">
                            <u-icon name="arrow-right" color="#fff" size="14"></u-icon>
                        </view> -->
                    </view>
                </view>
                <view class="canyuytouxian_bipx">
                    <view class="dage_box" v-for="(item, index) in DetailObj.zj_data" :key="index">
                        <view class="top_box">
                            <!-- <view class="shuzi_box"></view> -->
                            <image :src="item.avarat" mode="scaleToFill" />
                        </view>
                        <view class="nam_box">{{ item.nickname }}</view>
                    </view>
                </view>
            </view>
            <!-- <view style="height: 120rpx;"></view> -->
            <view class="btt_box">
                <view class="left_box" @click="participate">抽奖码</view>
                <view class="right_box" @click="jion" style="background-image: url('https://www.dingxians.cn/upload/user_static/common/btn-primary.png');">参与抽奖
                </view>
            </view>
		
		<cjm-show :show="jionShow" @ruleClose="ruleClose" :codeList="codeList"></cjm-show>
    </z-paging>
</template>

<script>
import api from '../../api/index.js'
import cjmShow from '../../components/cjm.vue'
export default {
    components: { cjmShow },
    data() {
		
        return {
            swiperList: [
                //轮播
                { image: "https://morgan.dingxians.cn/upload/20241219/6763c0e7b1dc4.png" },
            ],
            DetailObj: {
                zj_data:[],
                cy_data:[],
            },//参与详情
            jionShow: false,//抽奖码弹窗
            codeList: [],//抽奖码list
        };
    },

    onLoad(e) {
        this.luckyId = e.id
    },
    onShow() {
        this.getDetail()
    },
    methods: {
        back(){
uni.navigateBack({ delta: 1 })
        },
        // 监听滚动高度
        pageScroll(event) {
            uni.$emit("onPageScroll", event.detail.scrollTop)
        },
        // 幸运抽奖详情
        getDetail() {
             api.users.luckDrawsShow(this.luckyId).then(res => {
                if (res.code == 200) {
                    this.DetailObj = res.data
                }
            })
        },
        //抽奖码
        participate() {
				api.users.luckDrawsMyDrawCode({ id: this.luckyId }).then(res => {
                if (res.code == 200) {
                    this.codeList = res.data
                    if (res.data.length > 0) {
                        this.jionShow = true
                    } else {
                        this.show('暂无抽奖码')
                    }

                }
            })
        },
        // 关闭抽奖码
        ruleClose() {
            this.jionShow = false
        },
        //加入
        jion() {
            let that = this
            uni.showModal({
                title: '加入',
                editable: true,
                placeholderText: '请输入抽奖码',
                success: function (res) {
                    if (res.confirm) {
						console.log(res,'res')
                        that.jairu(res.content)
                    } else if (res.cancel) {
                        console.log('用户点击取消');
                    }
                }
            });

        },
        // 加入
        jairu(code) {
             api.users.luckDrawsDraw({ code: code, id: this.luckyId }).then(res => {
						console.log(res,'res')
                this.showModal = false
                if (res.code == 200) {
                }
                this.getDetail()
            })
        },

    },
};
</script>

<style lang="scss" scoped>
/deep/.tn-popup__content__center_box {
    background-color: rgba(255, 255, 255, 0) !important;
}

/deep/.zp-scroll-view-absolute {
    background-image: none !important;
    background-color: #000 !important;
}
.header_box {
    width: 750rpx;
    height: 180rpx;
    box-sizing: border-box;
    padding-top: 92rpx;
	position: absolute;
    z-index: 100;

    .biaoti_box {
        width: 100%;
        height: 88rpx;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0 20rpx;

        .left_icon_box {
            width: 80rpx;
            height: 80rpx;

            image {
                width: 100%;
                height: 100%;
            }
        }

        .center_biaoti_box {
            width: 380rpx;
            height: 88rpx;
            line-height: 88rpx;
            text-align: center;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            font-size: 40rpx;
            color: #fff;
            font-weight: 900;
        }
    }
}
.swiper_box {
    width: 750rpx;
    height: 538rpx;
    margin-bottom: 20rpx;
}

.jia_js_bopx {
    width: 690rpx;
    height: 160rpx;
    margin: auto;
    box-sizing: border-box;
    padding: 41rpx 18rpx 0 18rpx;
    background-size: 100% 100%;
    margin-bottom: 30rpx;

    .top_box {
        height: 30rpx;
        line-height: 30rpx;
        font-family: Source Han Serif CN;
        font-weight: bold;
        font-size: 40rpx;
        color: #FFFFFF;
        background: linear-gradient(118deg, #01E4FF 0%, #00FCFF 32.12890625%, #FFFCCD 61.62109375%, #A56BFF 99.4140625%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        margin-bottom: 29rpx;
    }

    .bot_box {
        height: 29rpx;
        line-height: 29rpx;
        font-family: Source Han Serif CN;
        font-weight: 400;
        font-size: 30rpx;
        color: #FFFFFF;
    }
}

.rule_box {
    width: 690rpx;
    height: 100rpx;
    margin: auto;
    box-sizing: border-box;
    background-size: 100% 100%;
    padding: 16rpx 0 0 22rpx;
    margin-bottom: 30rpx;

    .t {
        height: 29rpx;
        line-height: 29rpx;
        font-family: Source Han Serif CN;
        font-weight: bold;
        font-size: 30rpx;
        color: #FFFFFF;
        margin-bottom: 20rpx;
    }

    .b {
        height: 21rpx;
        line-height: 21rpx;
        font-family: Source Han Serif CN;
        font-weight: 400;
        font-size: 20rpx;
        color: #FFFFFF;
    }
}

.jianglu {
    width: 690rpx;
    height: 340rpx;
    background-size: 100% 100%;
    margin: auto;
    box-sizing: border-box;
    padding: 30rpx 0 0 30rpx;
    // overflow: hidden;
    overflow-y: auto;
    margin-bottom: 34rpx;

    .t {
        height: 29rpx;
        line-height: 29rpx;
        font-family: Source Han Serif CN;
        font-weight: bold;
        font-size: 30rpx;
        color: #FFFFFF;
        margin-bottom: 20rpx;
        margin-bottom: 7rpx;
    }

    .neirong_bopx {
        width: 100%;
        height: 119rpx;
        display: flex;
        justify-content: flex-start;
        position: relative;
        margin-bottom: 10rpx;

        .left_box {
            width: 115rpx;
            height: 119rpx;
            background-size: 100% 100%;
            position: relative;
            margin-right: 12rpx;

            image {
                height: 110rpx;
                width: 70rpx;
                position: absolute;
                left: 0;
                right: 0;
                top: 0;
                bottom: 0;
                margin: auto;
            }

        }

        .center_box {
            padding-top: 35rpx;
            width: 300rpx;

            .name_s_box {
                height: 29rpx;
                line-height: 29rpx;
                font-family: Source Han Serif CN;
                font-weight: bold;
                font-size: 30rpx;
                color: #49CBDB;
                margin-bottom: 30rpx;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowarp;
            }

            .name_jdj_box {
                height: 19rpx;
                line-height: 19rpx;
                font-family: Source Han Serif CN;
                font-weight: 400;
                font-size: 20rpx;
                color: #FFFFFF;
            }
        }

        .right_box {
            position: absolute;
            bottom: 7rpx;
            right: 20rpx;
            display: flex;
            justify-content: flex-end;

            .jiazhi_box {
                height: 42rpx;
                line-height: 42rpx;
                font-family: Source Han Serif CN;
                font-weight: 400;
                font-size: 20rpx;
                color: #FFFFFF;
            }

            .jzk_box {
                width: 188rpx;
                height: 42rpx;
                background-size: 100% 100%;
                text-align: center;
                line-height: 42rpx;
                font-family: FZZongYi-M05S;
                font-weight: 400;
                font-size: 31rpx;
                color: #FFFFFF;
            }
        }

    }


}


.renshunums_box {
    width: 697rpx;
    height: 218rpx;
    margin: auto;
    background-size: 100% 100%;
    padding-top: 14rpx;
    border-radius: 24rpx 24rpx 24rpx 24rpx;
    margin: 24rpx;

    .one_box {
        width: 100%;
        margin: auto;
        display: flex;
        justify-content: space-between;
        box-sizing: border-box;
        padding: 0 33rpx;
        margin-bottom: 24rpx;

        .l_t_bvox {
            // width: 110rpx;
            height: 27rpx;
            font-family: PingFang SC;
            font-weight: bold;
            font-size: 28rpx;
            color: #FFFFFF;
            line-height: 27rpx;
        }

        .r_t_bvox {
            height: 27rpx;
            font-family: PingFang SC;
            font-weight: bold;
            font-size: 28rpx;
            color: #FFFFFF;
            line-height: 27rpx;
            display: flex;
            justify-content: flex-end;
            align-items: center;

            .text_box {}

            .icon_box {}
        }
    }

    .canyuytouxian_bipx {
        width: 100%;
        height: 150rpx;
        display: flex;
        justify-content: flex-start;
        box-sizing: border-box;
        padding: 0 53rpx;
        overflow: hidden;
        overflow-x: auto;

        .dage_box {
            width: 100rpx;
            height: 136rpx;
            margin-right: 28rpx;

            .top_box {
                width: 100rpx;
                height: 100rpx;
                border-radius: 50%;
                margin-bottom: 13rpx;
                background-color: #fff;
                position: relative;

                .shuzi_box {
                    width: 35rpx;
                    height: 35rpx;
                    border-radius: 50%;
                    text-align: center;
                    line-height: 35rpx;
                    position: absolute;
                    z-index: 999;
                    top: 0rpx;
                    right: 0rpx;
                    background-color: red;
                    color: #FFFFFF;
                    font-size: 22rpx;
                }

                image {
                    width: 100rpx;
                    height: 100rpx;
                    border-radius: 50%;
                }
            }

            .nam_box {
                width: 100%;
                box-sizing: border-box;
                padding: 0 5rpx;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
                // height: 23rpx;
                font-family: PingFang SC;
                font-weight: 500;
                font-size: 24rpx;
                text-align: center;
                color: #FFFFFF;
                // line-height: 23rpx;
            }
        }
    }
}

.btt_box {
    position: fixed;
    width: 100%;
    height: 120rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-sizing: border-box;
    padding: 0 92rpx;
    bottom: 0;
    background-color: rgba(84, 123, 128, .1);

    .left_box {
        height: 120rpx;
        font-family: Source Han Sans, Source Han Sans;
        font-weight: 500;
        font-size: 30rpx;
        color: #FFFFFF;
        line-height: 120rpx;
        text-align: left;
        font-style: normal;
        text-transform: none;
    }

    .right_box {
        width: 202rpx;
        height: 72rpx;
        background-size: 100% 100%;
        font-family: Source Han Sans, Source Han Sans;
        font-weight: 500;
        font-size: 32rpx;
        color: #FFFFFF;
        line-height: 72rpx;
        text-align: center;
        font-style: normal;
        text-transform: none;
    }
}
</style>